import { useForm } from "react-hook-form";

interface FormData {
  username: string;
  email: string;
  password: string;
}

export function SignUpForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormData>();

  const onSubmit = (data: FormData) => {
    console.log(data);
    // 这里可以处理表单提交逻辑
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("username", { required: "使用者名称是必填的" })}
        placeholder="使用者名称"
      />
      {errors.username && <span>{errors.username.message}</span>}

      <input
        {...register("email", {
          required: "电子邮件是必填的",
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: "无效的电子邮件地址",
          },
        })}
        placeholder="电子邮件"
      />
      {errors.email && <span>{errors.email.message}</span>}

      <input
        type="password"
        {...register("password", {
          required: "密码是必填的",
          minLength: {
            value: 8,
            message: "密码至少是 8 位",
          },
        })}
        placeholder="密码"
      />
      {errors.password && <span>{errors.password.message}</span>}

      <button type="submit">注册</button>
    </form>
  );
}
